<template>
	<u-navbar :leftIconSize="42" titleStyle="font-size:20px;font-weight:600" :autoBack="true" :placeholder='true'
		title="订单详情">
	</u-navbar>
	<view class="padding-30rpx white-bg font-normal" style="padding-bottom:0px">
		<view class="flex-jc-s-b" style="padding-bottom: 10px;font-size: 14px;">
      <view>
        <text style="font-weight: bold;" :user-select="true">订单编号：{{data.info.num||''}}</text>
        <text v-if="data.info.num" class="copy-text" @click="copyHandle(data.info.num)">复制</text>
      </view>
      <text v-if="data.info.refundStatusCode === 'non' || data.info.refundStatusCode === 'cancel'"
            :style="data.info.statusCode !== 'cancel'? {color: '#409EFF'} : '' ">{{typeMap[data.info.statusCode]}}</text>
      <text v-if="data.info.refundStatusCode !== 'non' && data.info.refundStatusCode !== 'cancel'"
            :style="data.info.refundStatusCode !== 'success'? {color: '#EB5940'} : ''">{{typeMap[data.info.refundStatusCode]}}</text>
		</view>
		<u-line color="#0000001A"></u-line>
		<view class="flex-jc-s-b" style="padding-top:15px;">
			<text class="order-text">创建时间</text>
			<text class="detail-value">{{data.info.createTime||''}}</text>
		</view>
		<view class="flex-jc-s-b" style="padding-top:15px;padding-bottom:15px;" @click="goStudentList">
			<text class="order-text">学员人数</text>
			<view class="flex-center">
				<text class="detail-value">{{data.info.itemAmount||0}}人</text>
				<u-icon name="arrow-right" size="16" color="#333333" style="margin-top:3px;margin-left: 4px;" bold="true"></u-icon>
			</view>
		</view>
    <view v-if="data.info.statusCode === 'cancel'" class="flex-jc-s-b" style="padding-bottom:15px;">
      <text class="order-text">支付金额</text>
      <text class="detail-value">￥{{data.info.price||0}}</text>
    </view>
		<template v-if="data.info.statusCode == 'paid' || data.info.statusCode == 'payAuditing'">
			<view class="flex-jc-s-b" >
				<text class="order-text">支付方式</text>
				<text class="detail-value">{{data.info.payMethodCode=='wechat' ? '微信支付' : '线下支付'}}</text>
			</view>
			<view v-if="data.info.statusCode == 'paid'" class="flex-jc-s-b" style="padding-top:15px;">
				<text class="order-text">支付时间</text>
				<text class="detail-value">{{data.info.payTime||''}}</text>
			</view>
			<view class="flex-jc-s-b" style="padding-top:15px;padding-bottom:15px;">
				<text class="order-text">支付金额</text>
				<text class="detail-value">￥{{data.info.price||0}}</text>
			</view>
			<view v-if="data.info.payReceiptUrl" class="flex-hor-between" style="padding-bottom:15px;">
				<text class="order-text">付款凭证</text>
				<image :src="data.info.payReceiptUrl" style="width: 75px;height:75px;" @click="previewHandle"></image>
			</view>
		</template>
	</view>
  <!-- 预览 -->
  <u-overlay @click="data.showPreview=false" :show="data.showPreview" mode="center">
    <view class="flex-center" style="width: 100%;height: 100vh;">
      <image style="" :src="data.info.payReceiptUrl" mode=""></image>
    </view>
  </u-overlay>

	<view class="padding-30rpx white-bg" v-if="data.info.refundStatusCode != 'non'"
		style="font-size: 14px;margin-top: 15px;color: #333333;padding-bottom: 0;">
		<view class="flex-jc-s-b" style="padding-bottom: 10px;">
			<text style="font-weight: bold;">退款信息</text>
			<text style="font-size: 13px" class="order-text">{{data.refundTime}}</text>
		</view>
		<u-line style="margin-top: 10px;" color="#0000001A"></u-line>
		<view class="flex-jc-s-b" style="padding:15px 0;" v-for="(item,index) in data.refundList">
			<view class="">
				<view class="">
					<text style="font-size: 15px;font-weight: bold;">{{item.name}}</text>
					<text style="font-size: 13px;margin-left: 5px;">{{item.idCard}}</text>
				</view>
				<text style="color: #999999;font-size: 12px">{{item.courseName}}</text>
			</view>
			<view class="" style="color: #EB5940;font-size: 13px">
				<text>￥</text>
				<text style="font-size: 18px;font-weight: bold;">{{item.price}}</text>
				<text class="order-text" style="font-size: 13px;white-space: nowrap;">/{{item.dayAmount}}天</text>
			</view>
			<u-line v-if="index < data.refundList.length - 1" style="margin-top: 15px;" color="#0000001A"></u-line>
		</view>
	</view>

	<u-popup @close="data.showMessage = false" :customStyle="{'border-radius': '8px'}" :show="data.showMessage" mode='center' :safeAreaInsetBottom="false">
		<view class="common-popup text-center">
			<view class="popup-tip">提示</view>
			<view class="popup-content">{{data.tipMessage}}</view>
			<u-button :customStyle="{'width':'132px', 'height':'40px','fontSzie': '16px'}"
			type="primary" shape="circle" text="确认" @click="data.showMessage = false"></u-button>
		</view>
	</u-popup>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app";
	import pageRoute from '@/utils/pageRoute'
	import { onMounted, reactive, ref } from "vue";
	import { orderDetailApi, refundApi} from './const.js'
  import { copyHandle } from "@/utils/common.js"
	const data = reactive({
		id: '',
		info: {},
		showRefund: false,
		showMessage: false,
    showPreview: false,
		tipMessage: '',
		refundList: [],
		refundTime: ''
	})
  const typeMap = reactive({
    paying: '待付款',
    payAuditing: '审核中',
    paid: '已付款',
    cancel: '已取消',
    refunding: '退款中',
    success: '退款成功',
    failed: '退款失败'
  })
	onLoad((options) => {
		data.id = options.id || '';
	})
	onMounted(() => {
		orderDetail()
	})

	const orderDetail = () => {
		if (!data.id) {
			return
		}
		orderDetailApi(data.id).then((res) => {
			data.info = res.data
			if (data.info.refundStatusCode != 'non') {
				orderRefund()
			}
		})
	}

	const goStudentList = () => {
		pageRoute.route('pages/order/buy/student-list', {id: data.id, code: data.info.num})
	}

  const previewHandle = () => {
    data.showPreview = true
  }

	const orderRefund = () => {
		refundApi({ orderId: data.id }).then((res) => {
			let resData = res.rows[0]
			data.refundTime = resData.endTime
			data.refundList = resData.itemList
		})
	}

</script>

<style lang="scss" scoped>
	.order-text {
		color: #666666;
	}

	.detail-value {
		color: #333333;
	}

  .copy-text {
    margin-left: 10px;
    font-size: 12px;
    padding: 0 6px;
    background-color: #F6F6F6;
    border-radius: 8px
  }
</style>
